<template>
  <div class="products-settings-overview">
    <div class="page-header">
      <h1>产品配置中心</h1>
      <p>管理产品页面的所有配置项，包括产品页面基础设置和产品列表管理</p>
    </div>

    <div class="settings-grid">
      <!-- 产品页面基础配置 -->
      <el-card class="settings-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <el-icon class="card-icon"><Goods /></el-icon>
            <span>产品页面配置</span>
          </div>
        </template>
        <div class="card-content">
          <p>配置产品页面的标题、描述、头部背景图等基础设置</p>
          <ul class="feature-list">
            <li>多语言标题和描述</li>
            <li>页面头部背景图</li>
            <li>页面布局配置</li>
            <li>SEO相关设置</li>
          </ul>
        </div>
        <template #footer>
          <el-button type="primary" @click="navigateTo('/products-main-settings')">
            进入配置
            <el-icon class="el-icon--right"><ArrowRight /></el-icon>
          </el-button>
        </template>
      </el-card>

      <!-- 产品列表管理 -->
      <el-card class="settings-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <el-icon class="card-icon"><List /></el-icon>
            <span>产品列表管理</span>
          </div>
        </template>
        <div class="card-content">
          <p>管理所有产品信息，包括产品详情、图片、规格和认证信息</p>
          <ul class="feature-list">
            <li>产品信息管理</li>
            <li>多语言产品详情</li>
            <li>产品图片上传</li>
            <li>产品分类管理</li>
            <li>认证信息配置</li>
          </ul>
        </div>
        <template #footer>
          <el-button type="primary" @click="navigateTo('/products-list-settings')">
            进入配置
            <el-icon class="el-icon--right"><ArrowRight /></el-icon>
          </el-button>
        </template>
      </el-card>
    </div>

    <!-- 快捷操作 -->
    <el-card class="quick-actions" shadow="never">
      <template #header>
        <div class="card-header">
          <el-icon class="card-icon"><Operation /></el-icon>
          <span>快捷操作</span>
        </div>
      </template>
      <div class="actions-content">
        <el-button type="info" @click="previewSite">
          <el-icon><View /></el-icon>
          预览用户端
        </el-button>
        <el-button type="warning" @click="exportConfig">
          <el-icon><Download /></el-icon>
          导出配置
        </el-button>
        <el-button type="success" @click="importConfig">
          <el-icon><Upload /></el-icon>
          导入配置
        </el-button>
        <el-button type="primary" @click="initProducts">
          <el-icon><RefreshRight /></el-icon>
          初始化产品数据
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { request } from '../../utils/request'
import {
  Goods,
  List,
  ArrowRight,
  Operation,
  View,
  Download,
  Upload,
  RefreshRight
} from '@element-plus/icons-vue'

const router = useRouter()

const navigateTo = (path: string) => {
  router.push(path)
}

const previewSite = () => {
  // 打开用户端预览（假设用户端运行在8080端口）
  window.open('http://localhost:8080/products', '_blank')
}

const exportConfig = () => {
  ElMessage.info('导出功能开发中...')
}

const importConfig = () => {
  ElMessage.info('导入功能开发中...')
}

const initProducts = async () => {
  try {
    await ElMessageBox.confirm(
      '初始化将创建默认产品配置，已有配置不会被覆盖。是否继续？',
      '确认初始化',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    const response = await request.post('/settings/init-products') as any
    if (response.success) {
      ElMessage.success('初始化产品配置成功')
    }
  } catch (error: any) {
    if (error !== 'cancel') {
      ElMessage.error('初始化失败')
    }
  }
}
</script>

<style scoped>
.products-settings-overview {
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-header h1 {
  font-size: 28px;
  color: #303133;
  margin-bottom: 10px;
}

.page-header p {
  font-size: 16px;
  color: #606266;
  margin: 0;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 24px;
  margin-bottom: 30px;
}

.settings-card {
  height: 100%;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
  font-size: 16px;
}

.card-icon {
  font-size: 18px;
  color: #409eff;
}

.card-content {
  padding: 20px 0;
}

.card-content p {
  color: #606266;
  margin-bottom: 15px;
  line-height: 1.6;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li {
  padding: 5px 0;
  color: #909399;
  position: relative;
  padding-left: 16px;
}

.feature-list li::before {
  content: '•';
  color: #409eff;
  position: absolute;
  left: 0;
}

.quick-actions {
  margin-top: 30px;
}

.actions-content {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

:deep(.el-card__footer) {
  border-top: 1px solid #f0f0f0;
  padding: 16px 20px;
}
</style>